<template>
    <popupBottom ref="popupBottomRef" title="分享" height="25vh">
        <template v-slot:content>
            <view class="share-wrap margin-top-base">
                <button open-type="share" class="share-item cu-btn">
                    <view class="icon-weixinzhifu text-main" style="font-size: 90rpx"></view>
                    <view class="margin-top-sm">微信好友</view>
                </button>
                <button class="share-item cu-btn">
                    <view class="icon-pengyouquan text-main" style="font-size: 90rpx"></view>
                    <view class="margin-top-sm">微信朋友圈</view>
                </button>
                <button class="share-item cu-btn">
                    <view class="icon-tupian1 text-main" style="font-size: 90rpx"></view>
                    <view class="margin-top-sm">一键生成美图</view>
                </button>
            </view>
        </template>
    </popupBottom>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import popupBottom from "./popup-bottom.vue";

const popupBottomRef = ref<InstanceType<typeof popupBottom>>();

// const shareList = ref<AnyObject[]>([{ icon: "icon-weixinzhifu" }]);

const open = () => {
    popupBottomRef.value?.open();
};

defineExpose({
    open
});
</script>

<style lang="scss" scoped>
.share-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30rpx;

    .share-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        background-color: #fff;
        width: 100%;
        height: 180rpx;
    }
}
</style>
